<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/3 0003
  Time: 02:22
  To change this template use File | Settings | File Templates.
  查看我已完成的试卷答题情况
--%>

<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>查看答案</title>
</head>
<script src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<style>
    /* 标题栏样式*/
    .title {
        text-align: center;
    }

    .e1 {
        display: inline-block;
        margin-left: 10px;
        width: 100px;
        height: 25px;
        background-color: rgb(231, 231, 231);
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        margin-top: 8px;
    }

    .examtime {
        margin-top: 10px;
        color: rgb(211, 211, 211);
        font-size: 12px;
    }

    /* 试题内容栏样式 */
</style>
<body>
<!-- 标题栏 -->
<div class="title">
    <h1>${examquestionlist.get(0).exam_name}</h1>
    <div class="exampaper_getscore e1" style="color: red;font-weight: bold">得分:${examrecordlist.get(0).exam_score}分
    </div>
    <div class="exam_time_limit e1">用时:${examrecordlist.get(0).exam_usetime}分钟</div>
    <div class="exampaper_score e1">总分：${examquestionlist.get(0).exampaper_score}分</div>
    <div class="exampaper_passscore e1">及格分:${examquestionlist.get(0).exampaper_passscore}分</div>
    <button type="button" class="layui-btn layui-btn-primary reback" style="position: absolute;right: 50px">返回</button>
</div>
<!-- 试题内容栏 查看题型 进行分类-->
<form class="layui-form" action="" style="padding: 20px;position: relative;">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">

            <!-- *********选择题******* -->
            <div style="margin-bottom:10px;">
                <span style="font-size: large;">一、单选题</span>
                <c:forEach var="examquestion" items="${examquestionlist}">
                    <c:if test="${examquestion.question_type=='单选题'}">
                        <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                        <%--<c:out value="${examquestion.question_type}" default="单选题" escapeXml="flase"></c:out>--%>
                        <div class="layui-col-md12" style=" margin-top:10px;">
                            <div class="layui-card">
                                <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                                <div class="layui-card-body">A、${examquestion.question_optiona}</div>
                                <div class="layui-card-body">B、${examquestion.question_optionb}</div>
                                <div class="layui-card-body">C、${examquestion.question_optionc}</div>
                                <div class="layui-card-body">D、${examquestion.question_optiond}</div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item">
                                        <div>答案：${examquestion.question_answer}</div>
                                        <div>我的答案：<span id="${examquestion.question_id}"></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:if>
                </c:forEach>

            </div>

            <!-- *********多选题******* -->

            <div style="margin-bottom:10px;">
                <span style="font-size: large;">二、多选题</span>
                <c:forEach var="examquestion" items="${examquestionlist}">
                <c:if test="${examquestion.question_type=='多选题'}">
                    <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                <div class="layui-col-md12" style=" margin-top:10px;">
                    <div class="layui-card">
                        <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                        <div class="layui-card-body">A、${examquestion.question_optiona}</div>
                        <div class="layui-card-body">B、${examquestion.question_optionb}</div>
                        <div class="layui-card-body">C、${examquestion.question_optionc}</div>
                        <div class="layui-card-body">D、${examquestion.question_optiond}</div>
                        <div class="layui-card-body">
                            <div class="layui-form-item" pane="">
                                <div>答案：${examquestion.question_answer}</div>
                                <div>我的答案：<span id="${examquestion.question_id}"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </c:if>
            </c:forEach>
        </div>

        <!-- *********判断题******* -->

        <div style="margin-bottom:10px;">
            <span style="font-size: large;">三、判断题</span>
            <c:forEach var="examquestion" items="${examquestionlist}">
                <c:if test="${examquestion.question_type=='判断题'}">
                    <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                    <div class="layui-col-md12" style=" margin-top:10px;">
                        <div class="layui-card">
                            <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <div>答案：${examquestion.question_answer}</div>
                                    <div>我的答案：<span id="${examquestion.question_id}"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:if>
            </c:forEach>
        </div>

        <!-- *********填空题******* -->

        <div style="margin-bottom:10px;">
            <span style="font-size: large;">四、填空题</span>
            <c:forEach var="examquestion" items="${examquestionlist}">
                <c:if test="${examquestion.question_type=='填空题'}">
                    <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                    <div class="layui-col-md12" style=" margin-top:10px;">
                        <div class="layui-card">
                            <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <div>答案：${examquestion.question_answer}</div>
                                    <div>我的答案：<span id="${examquestion.question_id}"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:if>
            </c:forEach>
        </div>
    </div>
    </div>

</form>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer'], function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var laypage = layui.laypage,
            layer = layui.layer;
    })
    var arr = [];
    <c:forEach var="examquestion" items="${examquestionlist}">
    arr["${examquestion.question_id}"] = "${examquestion.question_answer}";
    </c:forEach>
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    window.onload = function () {
        var obj = localStorage.getItem("stu${user_id}${exampaper_id}");
        var jo = JSON.parse(obj);//字符串-->JSON

        for (var i = 0; i < jo.answer.length; i++) {
            for (var j = 0; j < arr.length; j++) {
                if (i == j) {
                    console.log("显示第" + i + "题")
                    $("#" + i).html(jo.answer[i]);
                }
            }
        }


    }

    // ******************返回按钮事件******************************************
    // var reback=document.querySelector(".reback");
    $(".reback").click(function () {
        location.href = "http://localhost:8080/OnlineExam/user/myexam.jsp";
    })

</script>
</html>
